<template>
	<view class="bar-content justify-between">
		<view class="bar-item justify-center flex-col align-center" :class="{'text-color':value==(index+1)}" v-for="(item,index) in barlists" :key="index" @click="go(index,item)">
			<i :class="['myicon icon_class',`${item.icon}`]"></i>
			<view class="uifont text">{{item.text}}</view>
		</view>
	</view> 
</template>

<script>
	export default {
		name:"BottomBar",
		props: {
		  value:Number,
		  barlists:Array,
		},
		data() {
			return {
			};
		},
		onLoad() {
		},
		methods: {
			go(index,item){
				this.$emit('update:input',index)
				this.redirect(item.pagePath)
			}
		}
	}
</script>

<style  lang="less" scoped>
	
.bar-content{
	position: fixed;
	bottom: 0;
	width: 100%;
	box-shadow: 0px 2px 16px 0px rgba(4,0,0,0.45);
	z-index: 50;
	background-color: #ffffff;
	.bar-item{
		flex: 1;
		padding-top: 8px;
		padding-bottom: 4px;
		.text{
			margin-top: 4px;
			font-size: 14px;
		}
		.icon_class{
			font-size: 18px;
		}
	}
	.bar-item:active {
	  background: #F0F0F0;
	}
}
</style>
